<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>用户注册</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
<div id="app" style="width:50%;margin:30px auto;">
    <h1 align="center">注册界面</h1>

    <el-form ref="form" :model="usermodel" label-width="80px">
        <el-form-item label="姓名">
            <el-input placeholder="请输入姓名" v-model="usermodel.name"></el-input>
        </el-form-item>
        <el-form-item label="密码">
            <el-input placeholder="请输入密码" v-model="usermodel.pwd" show-password></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-radio-group v-model="usermodel.gender">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="生日">
            <el-date-picker
                    v-model="usermodel.birthday"
                    type="date"
                    format="yyyy年MM月dd日"
                    placeholder="选择日期">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="头像">
            <el-upload
                    class="upload-demo"
                    action="#"
                    :http-request="handleSuccess"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :file-list="fileList"
                    list-type="picture">
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">注册</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>
</div>

<script src="../js/vue.js"></script>
<script src="../js/axios.min.js"></script>
<script src="../js/date.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    new Vue({
        el: '#app',
        data: {
            usermodel:{
                name:'',
                pwd:'',
                gender:'',
                birthday:'',
                pic:''
            },
            fileList: [],
        },
        methods:{
            handleSuccess(param){
                //console.log(param)
                //console.log(param.file)
                this.usermodel.pic = param.file
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            onSubmit(){
                alert('注册')
                //以二进制数据格式，传递表单数据
                let data = new FormData();
                //迭代usermodel对象中的数据，封装至FormData中
                for(let key in this.usermodel){
                    data.append(key , this.usermodel[key])
                    this.usermodel.birthday = new Date(this.usermodel.birthday).Format('yyyy-MM-dd')
                    data.append('birthday' , this.usermodel.birthday)
                }
                axios.post('/register' , data)
                    .then(response=>{
                        //console.log(response)
                        let code = response.data.code
                        let msg = response.data.msg
                        if(code==200){
                            this.$message({showClose: true,message: msg,type: 'success'});
                            //跳转至用户列表页面
                            window.location.href="./userViewAll.html#/viewAll"
                        }else{
                            this.$message({showClose: true,message: msg,type: 'error'});
                        }
                    })
                    .catch(error=>{
                        console.log(error)
                    })
            }
        }
    })
</script>
</body>

</html>